<template>
  <div style="padding:30px;">
    <div class="button">
      <span @click="show(1)" :class="index===1? 'active':''">
        基本信息
      </span>
      <span @click="show(2)" :class="index===2? 'active':''">
        价格设置
      </span>
<!--      <span @click="show(3)" :class="index===3? 'active':''">-->
<!--        商品详情-->
<!--      </span>-->
    </div>


    <!--    基本信息表单-->
    <div class="one" v-show="index===1 && isShow">
      <el-form :model="form" :rules="goodsRules" ref="goodsRulesForm" label-width="80px">
        <el-form-item label="商品名称" prop="gdName">
          <el-input v-model="form.gdName" placeholder="商品名称" style="width: 500px" ></el-input>
        </el-form-item>
        <el-form-item label="商品分类" prop="gdCategory">
<!--          <el-select v-model="form.gdCategory" placeholder="请选择" @change="search">-->
<!--            <el-option v-for="cat in category" :label="cat" :value="cat" ></el-option>-->
<!--          </el-select>-->
          <el-select v-model="form.gdCategory" placeholder="请选择商品类目" style="width: 500px">
            <el-option label="新鲜蔬菜" value="新鲜蔬菜"></el-option>
            <el-option label="五谷杂粮" value="五谷杂粮"></el-option>
            <el-option label="时令水果" value="时令水果"></el-option>
            <el-option label="水产海鲜" value="水产海鲜"></el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="商品类目" prop="gdType">
          <el-select v-model="form.gdType" placeholder="请选择商品类型" style="width: 500px">
            <el-option label="蔬菜" value="ves"></el-option>
            <el-option label="瓜果" value="fru"></el-option>
            <el-option label="粮油" value="oil"></el-option>
            <el-option label="水产" value="aqu"></el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="商品专栏" prop="gdSpecial">
          <el-select v-model="form.gdSpecial" placeholder="请选择商品专栏" style="width: 500px">
            <el-option label="扶贫专栏" value="扶贫专栏"></el-option>
            <el-option label="精品专栏" value="精品专栏"></el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="单位" prop="gdUnit">
          <el-input v-model="form.gdUnit" placeholder="请选择商品单位" style="width: 500px" ></el-input>
        </el-form-item>
        <el-form-item label="商品属性" prop="gdProperty">
          <el-select v-model="form.gdProperty" placeholder="请选择商品属性" style="width: 500px">
            <el-option label="标品" value="标品"></el-option>
            <el-option label="非标品" value="非标品"></el-option>
          </el-select>
        </el-form-item>
        <el-form-item>
          <el-button type="primary" @click="next_step('goodsRulesForm')">下一步</el-button>
        </el-form-item>
      </el-form>
    </div>




    <!--    价格设置-->
    <div class="two" v-show="index===2 && isShow">
      <el-form :model="form" :rules="goodsRules" ref="goodsRulesForm" label-width="80px">
        <el-form-item label="商品规格" prop="gdSpec">
          <el-input v-model="form.gdSpec" placeholder="商品规格" style="width: 500px" ></el-input>
        </el-form-item>
        <el-form-item label="商品价格" prop="gdPrice">
          <el-input v-model="form.gdPrice" placeholder="商品价格" style="width: 500px" ></el-input>
        </el-form-item>
        <el-form-item label="商品等级" prop="gdGrade">
          <el-select v-model="form.gdGrade" placeholder="请选择商品等级" style="width: 500px">
            <el-option label="一等" value="first_grade"></el-option>
            <el-option label="二等" value="second_grade"></el-option>
          </el-select>
        </el-form-item>
        <el-form-item>
          <el-button type="primary" @click="goodsSubmit('goodsRulesForm')">提交保存</el-button>
        </el-form-item>
      </el-form>

    </div>




    <!--    商品详情-->
<!--    <div class="three" v-show="index===3 && isShow">-->
<!--      <h1>商品详情</h1>-->
<!--    </div>-->

  </div>
</template>


<script>
import { addGoods, getList,findCategory } from '@/api/nested'
import router from '@/router'
export default {
  name:'Menu1',
  data() {
    return {
      pageNum:1,
      pageSize: 5,
      currentPage:1,
      index:1,
      isShow:true,
      form: {
        gdName: '',
        gdCategory: '',
        //gdType:'',
        gdSpecial:'',
        gdUnit:'',
        gdProperty:'',
        gdSpec:'',
        gdGrade:'',
        gdPrice:'',
      },
      //value1:true,
      //goodsList:[],
      goodsRules: {
        gdName: [
          { required: true, message: '商品名称不能为空', trigger: 'blur' },
        ],
        // gdCategory:[
        //   { required: true, message: '商品类目不能为空', trigger: 'change' },
        // ],
        // gdType:[
        //   { required: true, message: '商品分类不能为空', trigger: 'change' },
        // ],
        gdUnit: [
          { required: true, message: '商品单位不能为空', trigger: 'blur' },
        ],
        // gdProperty:[
        //   { required: true, message: '商品属性不能为空', trigger: 'change' },
        // ],
        gdSpec:[
          { required: true, message: '商品规格不能为空', trigger: 'blur' },
        ],
        // gdGrade:[
        //   { required: true, message: '商品等级不能为空', trigger: 'change' },
        // ],
      },
    }
  },
  methods: {
    fetchData() {
      let params = {
        pageNum: this.pageNum,
        pageSize: this.pageSize,
        gdName:this.form.gdName,
      }
      //getList是api/unit/.js中的
      getList(params).then(res => {
        let pageInfo = res.data;
        // console.log("pageInfo",pageInfo)
        this.tableGoods = pageInfo.list;
        this.total = pageInfo.total;
      })
    },
    show (value) {
      this.index === value ? this.isShow = !this.isShow : this.isShow = true
      this.index = value
    },
    //商品添加跳新页面添加
    next_step(formName){
      this.index = 2
      // this.$refs[formName].validate((valid) => {
      //   if(valid){
      //     this.$message({
      //       type: 'success',
      //       message: '跳转成功!',
      //       duration:1000
      //     });
      //     this.index = 2
      //   }else {
      //     this.$message({
      //       type: 'error',
      //       message: '添加失败',
      //       duration: 1000, })
      //   }
      // })
    },
    //商品提交添加
    goodsSubmit(formName){
      this.$refs[formName].validate((valid) => {
        if(valid){
          addGoods(this.form).then(res => {
            this.$message({
              type: 'success',
              message: '添加成功!',
              duration:1000
            });
            router.push({name:'Menu2'})
            this.fetchData();
          })
        }else{
          this.$message({
            type: 'error',
            message: '添加失败',
            duration: 1000, })
        }
      })
    },
  },
  created() {
    this.fetchData()
  },

}
</script>

<style scoped lang="scss">
.button {
  padding-bottom: 30px;
  padding-left: 15px;
  span {
    display: inline-block;
    height: 40px;
    line-height: 40px;
    text-align: center;
    width: 100px;
    border: 1px solid #e6e6e6;
    cursor: pointer;
  }
  .active {
    color: #ffffff;
    background: rgb(49, 49, 238);
  }
}
</style>
